<template>
  <div class="block">
    <div class="equip">
      <img :src="imgUrl" alt="" class="img" />
    </div>
    <div class="chart">
      <div class="can" ref="canRef"></div>
      <div class="can" ref="can2Ref" v-if="twoChart"></div>
    </div>
  </div>
</template>
<script setup>
import useCharts from "@/hooks/useCharts";
import { ref } from "vue";

let props = defineProps({
  imgUrl: {
    type: String,
    default: "",
  },
  baseOption1: {
    type: Object,
    default: () => {},
  },
  baseOption2: {
    type: Object,
    default: () => {},
  },
  twoChart: {
    type: Boolean,
    default: false,
  },
});

let canRef = ref();
let can2Ref = ref();

useCharts(canRef, props.baseOption1);
props.twoChart && useCharts(can2Ref, props.baseOption2);
</script>
<style lang="scss" scoped>
.block {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 10px;
  .equip {
    padding: 10px 0;
    width: 40%;
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .chart {
    margin-left: 20px;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    .can {
      flex: 1;
    }
  }
}
</style>
